import React, { useEffect } from "react";
import { withRouter } from "react-router-dom";
import { LockOutlined, UserOutlined, SafetyOutlined } from "@ant-design/icons";
import { Button, Form, Input, Row, Col, Divider, Select } from "antd";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import "./password.scss";
import logoImage from "../../data/logo.png";

function PassWordLogin(props) {
  const { setFormNavigation, history } = props;
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const [form] = Form.useForm();
  const { Option } = Select;
  const handleSubmit = () => {
    const formData = form.getFieldsValue();
    history.push({
      pathname: "/gcps-cusweb",
    });
  };

  const handleChange = (value) => {
    i18n.changeLanguage(value.key);
  };

  return (
    <div className="passwordbox">
      <div className="logoImageBox">
        <img src={logoImage} alt="" />
      </div>

      <div className="frombox">
        <Form
          form={form}
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
        >
          <Form.Item name="username">
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder={t("login.username")}
            />
          </Form.Item>
          <Form.Item name="password">
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder={t("login.password")}
            />
          </Form.Item>

          <Form.Item style={{ marginBottom: "0px" }}>
            <Row gutter={(10, 10)}>
              <Col span={15}>
                <Form.Item name="captcha">
                  <Input
                    prefix={<SafetyOutlined className="site-form-item-icon" />}
                    placeholder={t("login.VerificationCode")}
                  />
                </Form.Item>
              </Col>
              <Col span={8}>
                <div className="passwordVerify">
                  <Button onClick={() => {}}>
                    <img src={logoImage} alt="" />
                  </Button>
                </div>
              </Col>
            </Row>
          </Form.Item>

          <Button
            style={{ width: "100%" }}
            type="primary"
            onClick={() => {
              handleSubmit();
            }}
          >
            {t("login.Signin")}
          </Button>
        </Form>
        <p className="antbut">
          <span style={{ paddingLeft: "0px" }}>
            <Button
              type="link"
              style={{ paddingLeft: "0px", width: "70px" }}
              onClick={() => {
                setFormNavigation("2");
              }}
              block
            >
              {t("login.forgrtPassword")}
            </Button>
          </span>
          <span>
            <Select
              labelInValue
              style={{ width: 100 }}
              defaultValue="zh"
              onChange={handleChange}
            >
              <Option value="zh">简体中文</Option>
              <Option value="hk">繁体中文</Option>
              <Option value="en">English</Option>
            </Select>
          </span>
        </p>

        <div className="formfooter">
          <a
            href="https://www.allinpayintl.com/ch-zh/us.html"
            style={{ color: "rgb(69 73 79 / 42%)" }}
          >
            {t("login.aboutTonghua")}
          </a>
          <Divider type="vertical" />
          <a
            href="https://www.allinpayintl.com/ch-zh/contact.html"
            style={{ color: "rgb(69 73 79 / 42%)" }}
          >
            {t("login.contactUs")}
          </a>
        </div>
      </div>
    </div>
    // </div>
  );
}

PassWordLogin = withRouter(PassWordLogin);
export default PassWordLogin;
